import { ConfigEnv, defineConfig, loadEnv, UserConfig } from "vite";

import vue from "@vitejs/plugin-vue";
import vueJsx from "@vitejs/plugin-vue-jsx";

import { viteMockServe } from "vite-plugin-mock";
import mockDevServerPlugin from "vite-plugin-mock-dev-server";

import { createSvgIconsPlugin } from "vite-plugin-svg-icons";

import AutoImport from "unplugin-auto-import/vite";
import Components from "unplugin-vue-components/vite";
import { ElementPlusResolver } from "unplugin-vue-components/resolvers";

import Icons from "unplugin-icons/vite";
import IconsResolver from "unplugin-icons/resolver";

import path from "path";

// to make it easier to use vite.config.ts accepts a direct {@link UserConfig} object, or a function that returns it. The function receives a {@link ConfigEnv} object.
// 为了更容易地使用vite.config.ts接受直接的{@link UserConfig}对象或返回它的函数。该函数接收一个{@link ConfigEnv}对象。
// TODO -> 方式一：使用【UserConfig】直接导出配置对象。
// export default defineConfig({
//   plugins: [
//     vue(),
//   ],
//   // 其他配置...
// });

// to make it easier to use vite.config.ts accepts a direct {@link UserConfig} object, or a function that returns it. The function receives a {@link ConfigEnv} object.
// 为了更容易地使用vite.config.ts接受直接的{@link UserConfig}对象或返回它的函数。该函数接收一个{@link ConfigEnv}对象。
// TODO -> 方式一：使用【UserConfig】直接导出配置对象。
// TODO -> 方式二：使用导出函数，接收【ConfigEnv】对象。
// export default ({ command, mode }) => {
//   console.log(command); // 当前执行的命令，如：'serve'，或：'build'。
//   console.log(mode); // 当前的模式，如：'development'，或：'production'等等。这通常与'process.env.NODE_ENV'相对应。'command'和'mode'这两个属性都来自'ConfigEnv'对象。
//   console.log(process.env.VITE_APP_TITLE);
//   console.log(import.meta.env.VITE_APP_TITLE);
//   return {
//     plugins: [
//       vue(),
//     ],
//   };
// };
// 'command'和'mode'这两个属性都来自'ConfigEnv'对象。
// export default (config: ConfigEnv) => {
//   console.log(config.command); // 当前执行的命令，如：'serve'，或：'build'。
//   console.log(config.mode); // 当前的模式，如：'development'，或：'production'等等。这通常与'process.env.NODE_ENV'相对应。'command'和'mode'这两个属性都来自'ConfigEnv'对象。
//   console.log(process.env.VITE_APP_TITLE);
//   console.log(import.meta.env.VITE_APP_TITLE);
//   return {
//     plugins: [
//       vue(),
//     ],
//   };
// };
// 'command'和'mode'这两个属性都来自'ConfigEnv'对象。
// export default defineConfig((config: ConfigEnv) => {
//   console.log(config.command); // 当前执行的命令，如：'serve'，或：'build'。
//   console.log(config.mode); // 当前的模式，如：'development'，或：'production'等等。这通常与'process.env.NODE_ENV'相对应。'command'和'mode'这两个属性都来自'ConfigEnv'对象。
//   console.log(process.env.VITE_APP_TITLE);
//   console.log(import.meta.env.VITE_APP_TITLE);
//   return {
//     plugins: [
//       vue(),
//     ],
//   };
// });

/**
 * 01."@"别名配置
 *   npm config set registry https://registry.npmmirror.com
 *   npm config get registry
 *   npm install element-plus -S
 *   npm install @element-plus/icons-vue -S
 *   npm install @types/node --save
 *   resolve: {
 *     alias: {
 *       "@": path.resolve(__dirname, 'src')
 *     }
 *   },
 * 02.环境变量配置
 *   .env.development
 *   .env.production
 *   .env.testing
 * 03.svg图标配置
 *   npm install vite-plugin-svg-icons -D
 *   npm install fast-glob -D
 *   import 'virtual:svg-icons-register';
 *   plugins: [
 *     createSvgIconsPlugin({
 *       iconDirs: [path.resolve(process.cwd(), 'src/assets/svg')],
 *       symbolId: 'icon-[dir]-[name]',
 *     }),
 *   ],
 * 04.集成sass
 *   npm install sass sass-loader -D
 *   <style lang="scss" scoped></style>
 *   import "@/style/reset.scss";
 *   css: {
 *     preprocessorOptions: {
 *       scss: {
 *         javascriptEnabled: true,
 *         additionalData: '@import "./src/style/variable.scss";',
 *       },
 *     },
 *   },
 * 05.集成mock模拟数据生成器
 *   npm install -D mockjs vite-plugin-mock@2.9.6
 *   plugins: [
 *     viteMockServe({
 *       mockPath: "mock",
 *       supportTs: true,
 *       logger: true,
 *       localEnabled: command === "serve",
 *     }),
 *   ],
 * 06.axios安装和封装
 *   npm install axios -S
 * 07.vue-router路由
 *   npm install vue-router -S
 * 08.pinia持久化
 *   npm install pinia -S
 * 09.自动导入
 *   npm install unplugin-auto-import unplugin-vue-components -D
 *
 */
// TODO -> 方式二：使用导出函数，接收【ConfigEnv】对象。
export default defineConfig((config: ConfigEnv): UserConfig => {
  const mode = config.mode;
  console.log(mode);
  const command = config.command;
  console.log(command);
  const envDir = process.cwd();
  console.log(envDir);
  const env = loadEnv(mode, envDir);
  console.log(env);
  const env2 = process.env;
  console.log(env2);
  return {
    // 01.项目根目录，默认为：process.cwd()
    root: process.cwd(),
    // 02.应用的基础路径，默认为：'/'
    base: "/",
    // 03.指定当前模式，默认为：'development'
    mode: "development",
    // 04.静态资源目录，默认为：'public'
    publicDir: "public",
    // 05.缓存目录，默认为：'node_modules/.vite'
    cacheDir: "node_modules/.vite",
    // 06.用于配置模块解析的选项
    resolve: {
      // 实际的路径转换：'src'-->'@'
      alias: {
        "@": path.resolve(__dirname, "src"),
      },
    },
    // 07.用于配置开发服务器的选项
    server: {
      proxy: {
        "/api": {
          target: "http://syt.atguigu.cn",
          changeOrigin: true,
        },
      },
    },
    // 08.用于配置构建过程的选项
    build: {},
    // 09.用于配置CSS处理的选项
    css: {
      preprocessorOptions: {
        scss: {
          javascriptEnabled: true,
          // 自动导入定制化样式文件进行样式覆盖
          // additionalData: '@import "./src/style/variable.scss";',
          additionalData: `
            @use "@/style/common.scss" as *;
            @use "@/style/variable.scss" as *;
            @use "@/style/element/index.scss" as *;
          `,
        },
      },
    },
    // 10.要使用的Vite插件列表
    plugins: [
      vue(),
      vueJsx(),
      env.VITE_MOCK_DEV_SERVER === "true" ? mockDevServerPlugin() : null,
      // 10.2.整合MockJS模拟数据
      viteMockServe({
        mockPath: "mock",
        supportTs: true,
        watchFiles: true,
        logger: true,
        localEnabled: command === "serve", // 'serve': during dev (`vite` command)
      }),
      // 10.1.整合Svg图标
      createSvgIconsPlugin({
        iconDirs: [path.resolve(process.cwd(), "src/assets/svg")],
        // symbolId: "icon-[dir]-[name]",
        symbolId: "icon-[name]",
      }),
      AutoImport({
        // 自动导入Vue相关函数，比如：ref, reactive, toRef等等
        imports: ["vue", "@vueuse/core", "pinia", "vue-router", "vue-i18n"],
        resolvers: [ElementPlusResolver(), IconsResolver({})],
        eslintrc: {
          enabled: true, // 是否自动生成eslint规则，建议生成之后设置false
          filepath: "./.eslintrc-auto-import.json", // 指定自动导入函数eslint规则的文件
        },
        dts: false,
        // dts: path.resolve(path.resolve(__dirname, 'src'), "types", "auto-imports.d.ts"), // 指定自动导入函数TS类型声明文件路径
      }),
      Components({
        resolvers: [
          // 自动导入 Element Plus 组件
          ElementPlusResolver(),
          // 自动注册图标组件
          IconsResolver({
            // element-plus图标库，其他图标库 https://icon-sets.iconify.design/
            enabledCollections: ["ep"],
          }),
        ],
        // 指定自定义组件位置(默认:src/components)
        dirs: ["src/components", "src/**/components"],
        dts: false,
        // dts: path.resolve(path.resolve(__dirname, 'src'), "types", "components.d.ts"), // 指定自动导入组件TS类型声明文件路径
      }),
      Icons({
        autoInstall: true,
      }),
    ],
  };
});
